import React from "react";
import { Card, Row, Col, Button, Icon, Spin, Alert } from "antd";
import "./index.less";
interface IProp {}

interface IState {}

class UILoading extends React.Component<IProp, IState> {
	constructor(props: IProp, state: IState) {
		super(props, state);
		this.state = {};
	}

	render() {
		const loadingIcon = <Icon type="loading" />;
		const plusIcon = <Icon type="plus" />;
		return (
			<div>
				<div style={{ textAlign: "center", color: "red" }}>
					<h1>UI Loading</h1>
				</div>

				<Card title="基础Spin" className="button-wrap">
					<Row>
						<Col span={12}>
							<Spin size="small" />
							<Spin size="default" />
							<Spin size="large" style={{ margin: "0 10px" }} />
							<Spin indicator={loadingIcon} size="large" />
							<Spin indicator={plusIcon} size="large" />
							{/* <Button type="primary">Open</Button> */}
							{/* <Button type="primary" onClick={() => this.handleOpen("showModal2")}>
								自定义页脚
							</Button> */}
						</Col>
					</Row>
				</Card>
				<Card title="基础Icon" className="button-wrap">
					<Row>
						<Col span={12}>
							<Icon type="plus" />
							<Icon type="plus" spin={true} />
							<Icon type="plus" rotate={45} />
						</Col>
					</Row>
				</Card>
				<Card title="内容遮罩" className="button-wrap">
					<Row>
						<Col span={12}>
							<Spin size="small" spinning={true}>
								<Alert type="info" message="info" description="测试 Alert info"></Alert>
							</Spin>
							<Spin size="default" spinning={false}>
								<Alert type="success" message="success" description="测试 Alert success"></Alert>
							</Spin>
							<Spin size="large" indicator={loadingIcon} tip="加载中...">
								<Alert type="warning" message="warning" description="测试 Alert warning"></Alert>
							</Spin>
							<Spin size="large" indicator={plusIcon}>
								<Alert type="error" message="error" description="测试 Alert error"></Alert>
							</Spin>
						</Col>
					</Row>
				</Card>
			</div>
		);
	}
}

export default UILoading;
